<!-- 页面外套 -->
<div class="page-wrapper" id="personnel_security_staff">

    <!-- 数据网格 -->
    <div class="datagrid datagrid-striped">
        <!-- 工具条组 -->
        <div class="tool-group">
            <form class="tool-search">
                <input type="hidden" name='page'>
                <input type="hidden" name='recPerPage'>
                <div class="im-label">
                    <div class="input-group">
                        <select class="form-control" name="sid"><option value="1">员工姓名</option></select>
                        <span class="input-group-addon fix-border fix-padding"></span>
                        <input type="text" class="form-control" name="search">
                    </div>
                </div>
                <label class="only-workable">
                    <span>部门</span>
                    <select class="form-control" name="department"><!-- JS推进 --></select>
                </label>
                <label>
                    <span>投保状态</span>
                    <select class="form-control" name="tbstate">
                        <option value="0">请选择</option>
                        <option value="1">未投保</option>
                        <option value="2">正常在保</option>
                        <option value="3">已经停保</option>
                        <option value="4">停保未生效</option>
                    </select>
                </label>
                <label class="only-workable">
                    <span>员工状态</span>
                    <select class="form-control" name="state">
                        <option value="0">请选择</option>
                        <option value="1">试用期</option>
                        <option value="2">在职</option>
                    </select>
                </label>
                <div class="im-label only-workable">
                    <span>入职时间</span>
                    <div class="input-group">
                        <input type="text" class="form-control" name="starttime" readonly>
                        <span class="input-group-addon fix-border fix-padding"></span>
                        <input type="text" class="form-control" name="endtime" readonly>
                    </div>
                </div>
                <div class="im-label only-workless" style="display:none;">
                    <span>离职时间</span>
                    <div class="input-group">
                        <input type="text" class="form-control" name="leavedate" readonly>
                    </div>
                </div>
                <label><button type="button" class="btn btn-primary tool_search_btn"><i class="icon icon-search"></i> 搜索</button></label>
                <div class="clearfix"></div>
                <input type="hidden" name="type" value="在职人员">
            </form>
            <div class="tool-deal">
                <div class="btn-group pull-left" style="margin-right:10px;">
                    <button type="button" class="btn btn-primary active" value="在职人员">在职人员</button>
                    <button type="button" class="btn btn-primary" value="离职人员">离职人员</button>
                </div>
                <label><button type="button" class="btn btn-primary tool_export_btn">生成账单</button></label>
                <div class="clearfix"></div>
            </div>
        </div>
        <!-- tool-group -->

        <div class="datagrid-container"></div>
        <ul class="pager btn-mini" data-elements="prev,pages,next"></ul>
    </div>
    <!-- datagrid -->

    <!-- 操作数据 -->
    <form class="line_deal_form"><input type="hidden" name="id"></form>

    <!-- 生成盒子 -->
    <div class="modal modal-for-page fade tool_export_box" aria-hidden="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                    <h4 class="modal-title">生成账单</h4>
                </div>
                <div class="modal-body">
                    <form class="container form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2">选择月份</label>
                            <div class="col-sm-8"><input type="text" class="form-control" name="month" readonly></div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary tool_export_submit">提交</button>
                </div>
            </div>
        </div>
    </div>

</div>
<!-- page-wrapper -->

<script>
$(function() {

    //变量声明
    var personnel_security_staff = $("#personnel_security_staff");
    var personnel_security_staff_api = {
        datagrid : API.test_datagrid,
        department : LOCAL+"Test/test_select.json",
        deal : API.test_response,
        export : API.test_response,
    }

    //数据表格
    //数据源
    var personnel_security_staff_dataSource = {
        cols   : [
            {name: "name", label: "姓名",width: 100},
            {name: "name", label: "投保状态",width: 90},
            {name: "text4",label: "参保方案",width: 90},
            {name: "text4",label: "员工状态",width: 90},
            {name: "datetime",label: "入职日期",width: 140},
            {name: "datetime",label: "转正日期",width: 140},
            {name: "",label:"操作",width:110,html:true,
                valueOperator : {
                    getter : function(dataValue,cell){
                        return `<a class="line_deal_btn" dataId="${cell.config.data.id}">立即投保</a>`;
                    }
                }
            }
        ],
        remote : function(){
            return zui_datagrid_remote({
                page_dom : personnel_security_staff, 
                url      : personnel_security_staff_api.datagrid
            });
        },
        remoteConverter : function(data){ 
            return zui_datagrid_filter({
                page_dom : personnel_security_staff,
                data     : data
            });
        }
    };
    //实例化
    personnel_security_staff.find('.datagrid').datagrid(
        zui_datagrid_option({
            datagrid   : personnel_security_staff.find('.datagrid'),
            dataSource : personnel_security_staff_dataSource
        })
    );
    //搜索
    personnel_security_staff.find('.tool_search_btn').click(function(){ 
        zui_datagrid_render({
            datagrid_obj : personnel_security_staff.find('.datagrid').data("zui.datagrid"),
            dataSource   : personnel_security_staff_dataSource
        }); 
    });

    // 立即投保
    personnel_security_staff.on("click", '.line_deal_btn', function() {
        personnel_security_staff.find('.line_deal_form [name="id"]').val( $(this).attr('dataId') );
        um_data_submit({
            url: personnel_security_staff_api.deal,
            form: personnel_security_staff.find('.line_deal_form'),
            dataSource: personnel_security_staff_dataSource,
        });
    });

    // 生成账单
    personnel_security_staff.on("click", ".tool_export_btn", function(){
        personnel_security_staff.find('.tool_export_box').modal('show');
    });
    personnel_security_staff.on("click", ".tool_export_submit", function(){
        $.ajax({
            url : personnel_security_staff_api.export,
            type: "post",
            dataType: "json",
            data : um_data_get( personnel_security_staff.find('.tool_export_box form') ),
            beforesend: function() {
                um_tip("导出中…");
            },
            success: function(data) {
                if (data.status > 0) {
                    window.open(API.test_export);
                    um_tip(data.message);
                    setTimeout(function(){
                        personnel_security_staff.find('.tool_export_box').modal('hide');
                    }, 1500);
                } else {
                    um_tip(data.message, "1500", "text-danger");
                }
            }
        });
    });

    // 组件实例化
    personnel_security_staff.find('.tool-search [name="starttime"]').datetimepicker(option_date);
    personnel_security_staff.find('.tool-search [name="endtime"]').datetimepicker(option_date);
    personnel_security_staff.find('.tool-search [name="leavedate"]').datetimepicker(option_date);
    personnel_security_staff.find('.tool_export_box [name="month"]').datetimepicker(option_month);

    // 下拉菜单
    um_select_option({
        dom : personnel_security_staff.find('.tool-search [name="department"]'),
        url : personnel_security_staff_api.department,
        use : 'search',
    });

    // 在职人员 离职人员 数据切换
    personnel_security_staff.find('.tool-deal .btn-group .btn').click(function(){
        // 变量声明
        common_form_reset();
        var value = $(this).attr('value');
        // 按钮切换
        $(this).siblings('.btn').removeClass('active');
        $(this).addClass('active');
        // 表单切换
        personnel_security_staff.find('.tool-search .only-workable, .tool-search .only-workless').show();
        if (value === '在职人员') {
            personnel_security_staff.find('.tool-search .only-workless').hide();
        } else {
            personnel_security_staff.find('.tool-search .only-workable').hide();
        }
        // 数据刷新
        personnel_security_staff.find('.tool-search [name="type"]').val( value );
        zui_datagrid_render({
            datagrid_obj : personnel_security_staff.find('.datagrid').data("zui.datagrid"),
            dataSource   : personnel_security_staff_dataSource
        });
    });

}); //预加载结尾
</script>